﻿@{
    Layout = null;
    List<KingRoad.EPM.ProjectInfoEntity.COMMON_FILE> ConmmonList = ViewBag.list as List<KingRoad.EPM.ProjectInfoEntity.COMMON_FILE>;
}
@using System.Collections.Generic
@using System.Linq
@model System.Collections.Generic.IEnumerable<DotNet.Model.BaseModuleEntity>
@{  var listLevel2 = Model.Where(x => x.ParentId == ViewBag.ParentId);  }
<script type="text/javascript">
    var AllInstructionslist = ""; //存储当前登陆人所有能看的功能模块的说明图列表
    var AllBrowserHistory = ""; //存储当前登陆人功能模块查看历史记录表
    var imgindex = 0; //切换图片时记录图片索引
    var listmodel = []; //根据点击的功能模块过滤的该功能模块的说明图列表
    function GetInstructionsData() {//获取当但登陆人所有功能模块的说明图列表
        var id = "@ViewBag.MoudleIDs";
        $.post("/Home/InstructionsData", { "IDs": id }, dialogInstructionsData, "json");
    }
    function dialogInstructionsData(json) {//获取说明图列表回调函数
        AllInstructionslist = json;
    }
    function GetBrowserHistoryData() {//获取当但登陆人的浏览记录
        var id = "@ViewBag.MoudleIDs";
        $.post("/Home/BrowserHistoryData", { "IDs": id }, dialogBrowserHistoryData, "json");
    }
    function dialogBrowserHistoryData(json) {//获取浏览记录表的回调函数
        AllBrowserHistory = json;
    }
    function WriteHistory(id) {//第一次点击功能模块后写入数据库
        $.post("/Home/WriteHistory", { "MoudleID": id }, dialogWriteHistory, "json");
    }
    function dialogWriteHistory(json) {//浏览记录回调函数
        if (json > 0) {
            GetBrowserHistoryData();
        }
    }
    //打开遮罩层事件
    function OnMask(id) {
        listmodel = [];
        for (var i = 0; i < AllInstructionslist.length; i++) {
            if (AllInstructionslist[i].Instructions_MoudleID == id) {
                listmodel.push(AllInstructionslist[i]);
            }
        }
        if (listmodel.length == 0) {
            var model = { "Instructions_Path": "/Content/images/button/NoHave.jpg" }; //如果没有图片则加载默认图片
            listmodel.push(model);
        }
        document.getElementById('backgroundInstructions').style.display = 'block'; //打开遮罩层
        $("#backgroundInstructions").append("<span id = 'prev'onclick='ChangeClick(-1)'style=''></span>"); //加载翻页按钮
        $("#backgroundInstructions").append("<img id = 'img' src='" + listmodel[0].Instructions_Path + "'alt='" + imgindex + "'style='display:block; position:absolute;width:840px;height:600px;z-index:1112;top:50%;left:50%;margin-left:-420px;margin-top:-300px;' />"); //加载图片
        $("#backgroundInstructions").append("<span id = 'next'onclick='ChangeClick(1)'></span>"); //加载翻页按钮
        $("#backgroundInstructions").append("<span id = 'Close' onclick='OffMask()'></span>"); //加载关闭按钮
    }
    //关闭遮罩层事件
    function OffMask() {
        document.getElementById('backgroundInstructions').style.display = 'none'; //关闭遮罩层
        $("#img").remove(); //移除图片
        $("#next").remove(); //移除翻页按钮
        $("#prev").remove(); //移除翻页按钮
        $("#Close").remove(); //移除关闭按钮
    }
    //图片切换事件
    function ChangeClick(index) {
        imgindex = imgindex + index;
        if (imgindex >= listmodel.length) {
            imgindex = 0;
            document.getElementById('img').src = listmodel[imgindex].Instructions_Path;
        }
        else if (imgindex < 0) {
            imgindex = listmodel.length - 1;
            document.getElementById('img').src = listmodel[imgindex].Instructions_Path;
        }
        else {
            document.getElementById('img').src = listmodel[imgindex].Instructions_Path;
        }
    }
    //功能模块的点击事件
    function MoudleClick(id) {
        var recordID = 0; //记录是否含有浏览记录
        for (var j = 0; j < AllBrowserHistory.length; j++) {//判断是否浏览过该功能模块
            if (AllBrowserHistory[j].BrowserHistory_MoudleID == id) {
                recordID = recordID + 1;
            }
        }
        if (recordID == 0) {
            for (var k = 0; k < AllInstructionslist.length; k++) {
                if (AllInstructionslist[k].Instructions_MoudleID == id) {
                    OnMask(id);
                    WriteHistory(id);
                }
            }
        }
    }
    //页面加载完成事件
    $(document).ready(function () {
        GetInstructionsData(); //页面加载完成时获取说明图列表数据
        GetBrowserHistoryData(); //页面加载完成时获取浏览记录列表
    });
    //列表添加鼠标经过时间
    $(function () {
        $(".accordionContent ul.tb_are li").hoverClass("hover");
    }); 
</script>
<!--以下css控制左侧菜单-->
<style>
    .accordionContent ul.tb_are li
    {
        height: 32px;
        line-height: 32px;
        color: #222;
        font-size: 12px;
        font-weight: 400;
        overflow: hidden;
        background-position: 0 -200px;
        cursor: pointer;
    }
    .accordionContent ul.tb_are li.hover
    {
        background: #e2eaf6;
    }
    .accordionContent ul.tb_are li.hover a
    {
        color: #2a65bf;
    }
    /*.accordionContent ul.tb_are .leftNavNode{float:left; width:32px;height:32px;background:url(/Content/themes/default/images/tree/accordionTreeLink.png) no-repeat;}*/
    /*.accordionContent ul.tb_are li:last-child .leftNavNode{background:url(/Content/themes/default/images/tree/accordionTreeLink_Last.png) no-repeat;}*/
    .accordionContent ul.tb_are li img
    {
        border: 0;
        margin: 0;
        float: left;
        width: 20px;
        height: 20px;
        margin: 6px 10px;
    }
    .accordionContent ul.tb_are li .leftNavFunc
    {
        width: 30px;
        height: 30px;
        float: right;
        background-position: 0 -250px;
        margin-top: -30px;
        display: none;
    }
    .accordionContent ul.tb_are li.hover .leftNavFunc
    {
        display: block;
    }
    .accordionContent ul.tb_are li a
    {
        display: block;
        padding: 0 30px 0 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
</style>
<div class="accordion" fillspace="sidebar">
    @foreach (var m2 in listLevel2)
    {
        <div class="accordionHeader">
            <h2>
                <span>Folder</span>@m2.FullName</h2>
        </div>
        <div class="accordionContent">
            <ul class="tb_are">@*tree treeFolder*@
                @{var listLevel3 = Model.Where(y => y.ParentId == m2.Id);}
                @foreach (var m3 in listLevel3)
                {
                    <li onclick="MoudleClick(@m3.Id)">
                        <!--<div class="leftNavNode"></div>-->
                        <img src="@m3.ImageUrl" border="0"  alt="@m3.FullName"/>
                        <a  href="@m3.NavigateUrl" target="navTab" rel="@m3.Code">@m3.FullName</a> <em class="leftNavFunc" onclick="OnMask(@m3.Id)">
                        </em></li>
                }
            </ul>
        </div>
    }
</div>
